<template>
  <div style="margin-top:20px">
    <div
      class="demo-image__placeholder"
      style="margin-top:20px"
    >
      <div
        class="block"
        style="width:855px;margin:0 auto;position:relative"
        v-if="card"
      >
        <div
          class="demonstration"
          style="position:absolute;right:10px"
        >
          <div style="font-size:22px;width:350px;font-weight:bold">{{card.name}}</div>
          <div style="font-size:22px;color:red;margin-top:10px">￥{{Number(user.price).toFixed(2)}}</div>
          <div>
            <el-tag
              type="success"
              effect="dark"
              style="margin-right:10px;margin-top:10px;"
            >
              标签
            </el-tag>
            <span style="font-size:14px">{{card.pc}}</span>
          </div>
          <div style="margin-top:10px;">
            <el-tag
              type="success"
              effect="dark"
              style="margin-right:10px;"
            >
              买家姓名
            </el-tag>
            <span style="font-size:14px">{{user.name}}</span>
          </div>
          <div style="margin-top:10px;">
            <el-tag
              type="success"
              effect="dark"
              style="margin-right:10px;"
            >
              买家地址
            </el-tag>
            <span style="font-size:14px">{{user.place}}</span>
          </div>

          <div>
            <el-tag
              type="success"
              effect="dark"
              style="margin-right:10px;margin-top:10px;"
            >
              购买时间
            </el-tag>
            <span style="font-size:14px">{{user.date}}</span>
          </div>
          <div>
            <el-tag
              type="success"
              effect="dark"
              style="margin-right:10px;margin-top:10px;"
            >
              买家电话
            </el-tag>
            <span style="font-size:14px">{{user.phone}}</span>
          </div>
          <div>
            <el-button
              type="warning"
              round
              style="margin-top:15px"
              v-if="card.st==0"
              @click="open"
            >立即派送</el-button>
            <el-button
              v-if="card.st==1"
              type="primary"
              round
              style="margin-top:15px"
              @click="open"
            >派送中...</el-button>
            <el-button
              v-if="card.st==3"
              type="danger"
              round
              style="margin-top:15px"
              @click="open"
            >已完成</el-button>
          </div>
        </div>
        <el-image
          :src="card.src"
          style="width:400px;position:relative;"
        >
          <div
            slot="placeholder"
            class="image-slot"
          >
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </div>
    </div>
    <comment :card="card"></comment>
  </div>
</template>
<script>
import comment from '../../components/comment.vue'
export default {
  components: { comment },
  data: () => ({
    card: [],
    flag: false,
    user: [],
    sc: {},
    ree: []
  }),
  async created() {
    const res = await this.$http.goodsdetail(this.$route.params, this.$route.params.id)
    this.card = res.message[0]
    this.user = JSON.parse(res.message[0].buyer)
    const re = await this.$http.getshopping(this.$store.state.user[0].username)
    this.ree = JSON.parse(re.message[0].dingdan)
  },
  methods: {
    async open() {
      this.card.st = 1
      await this.$http.goodsst(this.card.id, this.card)
      this.ree.map((el) => {
        if (el.id === this.card.id) {
          el.st = this.card.st
        }
      })
      await this.$http.shopping(this.ree, this.$store.state.user[0].username)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
